<template>
<div>
  <el-form
    ref="mainForm"
    :model="formData"
    :rules="rules"
    size="mini"
    label-width="100px"
    class="editForm"
  >
    <!--表单项-->
    <el-row v-if="installGps" class="operation-button">
      <el-button class="filter-item right-btn" @click="cancel">取消</el-button>
      <el-button class="filter-item right-btn" type="primary" @click="saveData()">提交</el-button>
    </el-row>

    <el-row v-if="installGps">
      <el-col :span="8">
        <el-form-item label="GPS订单号" prop="gpsOrderId" class="car-form-item">
          <el-input v-model="formData.gpsOrderId" class="car-modal-col" placeholder="请输入" />
        </el-form-item>
        <el-row>
          <el-col :span="12" >
            <el-form-item label="有线"  prop="wired" class="car-form-item">
              <el-input type="number" v-model="formData.wired" class="car-modal-col" />
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="无线" prop="wireless" class="car-form-item">
              <el-input type="number" v-model="formData.wireless" class="car-modal-col"  />
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-form-item label="序列号" prop="serialNumber" class="car-form-item">
          <el-input v-model="formData.serialNumber" class="car-modal-col" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="GPS安装要求" prop="gpsInstallRequirements" class="car-form-item">
          <el-input v-model="formData.gpsInstallRequirements" class="car-modal-col" placeholder="请输入" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="类型" prop="gpsType" class="car-form-item">
          <el-select v-model="formData.gpsType" class="car-modal-col" placeholder="请选择GPS类型">
            <el-option v-for="item in gpsTypeData" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="安装人" prop="installUser" class="car-form-item">
          <el-input v-model="formData.installUser" class="car-modal-col" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <el-row>
    <el-col :span="20" :offset="2">
      <el-table
        border
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        :data="installedGpsData"
        style="width: 100%">
        <el-table-column
          prop="serialNumber"
          label="序列号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="type"
          label="类型"
          width="180">
        </el-table-column>
        <el-table-column
          prop="installedBy"
          label="安装人">
        </el-table-column>
        <el-table-column
          prop="installedPosition"
          label="安装位置">
        </el-table-column>
        <el-table-column
          prop="status"
          label="设置状态">
          <div slot-scope="scope" :style="{'color':scope.row.status === '1'?'green':'red'}">{{scope.row.status === "1" ? "正常":"异常"}}</div>
        </el-table-column>
        <el-table-column
          prop=""
          label="操作">
          <el-button type="primary" round @click="toGpsDetail()" >查看</el-button>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <el-row v-if="installGps" class="gps-image-upload">
    <el-upload class="right-btn"
               :action="uploadActionUrl"
               accept="image/jpeg,image/gif,image/png"
               multiple
               :limit="3"
               :on-exceed="handleExceed"
               :on-error="uploadError"
               :on-success="uploadSuccess"
               :on-remove="onRemoveTxt"
               :before-upload="onBeforeUpload"
               :file-list="files">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
  </el-row>
  <el-row class="gps-image">
    <div class="gps-image-item" v-for="(url, index) in gpsImages">
      <el-image
        :src="url"
        :preview-src-list="getSrcList(index)"></el-image>
    </div>
  </el-row>

</div>
</template>

<script>
export default {
  name: "gps-detail.vue",
  props:{
    gpsOrderId:String, //GPS订单ID
    installGps: Boolean //是否是安装GPS页面，false为显示GPS单详情页面
  },
  data(){
    return{
      formData: {}, // 添加表单
      installedGpsData:[], //在安装GPS界面显示GPS列表数据
      //GPS类型选项
      gpsTypeData:[
        {label:"有线",value:"wired"},
        {label:"无线",value:"wireless"},
      ],
      //GPS图片
      gpsImages:[]
    }
  },
  created() {
    this.initDatabase(this.gpsOrderId);
  },
  methods:{
    //页面初始化数据
    async initDatabase(parentId){
      ///已安装的GPS数据
      this.installedGpsData = [
        {
          serialNumber: "ZR001",
          type: "有线",
          installedBy: "王",
          installedPosition:"车门",
          status: "1"
        },
        {
          serialNumber: "ZR002",
          type: "无线",
          installedBy: "王",
          installedPosition:"车门",
          status: "0"
        },
        {
          serialNumber: "ZR003",
          type: "有线",
          installedBy: "王",
          installedPosition:"车门",
          status: "1"
        }
      ]
      //已上传的GPS图片
      this.gpsImages = [
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ]
    },
    //上传成功
    uploadSuccess(){
      this.initDatabase(this.gpsOrderId)
    },
    //跳转GPS厂商页面查看GPS设备详情
    toGpsDetail(){
      window.open("http://www.baidu.com","_blank");
    },
    //图片处理
    getSrcList(index){
      return this.gpsImages.slice(index).concat(this.gpsImages.slice(0,index))
    },
    //保存数据
    saveData(){

    },
    /*
    取消当前GPS页面
     */
    cancel(){
      this.$refs['mainForm'].resetFields();
      this.$emit("canceldialog");
    },

  }
}
</script>

<style scoped>
.right-btn{
  float: right;
  margin-right: 20px;
}
.gps-image{
  min-height: 200px;
  border: 1px dashed lightgray;
  margin-top: 20px;
}
.gps-image-upload{
  padding-top: 20px;
}
.gps-image-item{
  display: inline-block !important;
  margin: 5px;
}
.el-select{
  width: 100%;
}
.el-image{
  width: 100px;
  height: 100px;
}
.operation-button{
  margin-bottom: 10px;
}
</style>
